<template>
  <div class="common-layout">
    <el-container>
      <el-header height="auto">
        <FormDesignerHeader @toggleWordImport="toggleWordImportPanel"></FormDesignerHeader>
      </el-header>
      <el-container class="form-designer-container">
        <el-aside width="300px">
          <FormDesignerLeft></FormDesignerLeft>
        </el-aside>
        <el-main class="form-designer-main">
          <FormDesignerMid></FormDesignerMid>
        </el-main>
        <el-aside width="300px">
          <FormDesignerRight></FormDesignerRight>
        </el-aside>
      </el-container>
    </el-container>


    <!-- Word导入抽屉 -->
    <el-drawer v-model="showWordImportPanel" title="Word文档导入" direction="rtl" size="60%"
      :before-close="handleWordImportClose">
      <WordUploader @close="showWordImportPanel = false"></WordUploader>
    </el-drawer>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import FormDesignerHeader from './formDesignerHeader/index.vue'
import FormDesignerLeft from './formDesignerLeft/index.vue'
import FormDesignerMid from './formDesignerMid/index.vue'
import FormDesignerRight from './formDesignerRight/index.vue'
import WordUploader from '@/components/WordUploader.vue'

const showWordImportPanel = ref(false)


const toggleWordImportPanel = () => {
  showWordImportPanel.value = !showWordImportPanel.value
}

const handleWordImportClose = (done: () => void) => {
  showWordImportPanel.value = false
  done()
}
</script>
<style scoped lang="scss">
.el-header {
  padding: 0;
}

.form-designer-container {
  height: calc(100vh - 115px);
}

.form-designer-main {
  padding: 0;
}
</style>
